<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/header.jsp" %>
<!-- 顶部标题栏 -->
<div class="wu-header" data-options="region:'north',border:false,split:true">
    <div class="wu-header-left">
        <h1>Free Room 酒店管理系统</h1>
    </div>
    <div class="wu-header-right">
        <p>
            <strong class="easyui-tooltip" title="已登录">${role.name}: ${admin.username}</strong>, 欢迎您！
        </p>
        <p>
            <a href="logout">安全退出</a>
        </p>
    </div>
</div>
<!-- 顶部标题栏 -->
<!-- 左侧菜单栏 -->
<div class="wu-sidebar" data-options="region:'west',split:true,border:true,title:'导航菜单'">
    <ul class="easyui-tree">
        <c:forEach items="${topMenuList}" var="topMenu">
            <li style="padding: 5px;" iconCls="${topMenu.icon}">
                <span data-icon="${topMenu.icon}">
                        ${topMenu.name}
                </span>
                <ul>
                    <c:forEach items="${secondMenuList}" var="secondMenu">
                        <c:if test="${secondMenu.parentId == topMenu.id }">
                            <li iconCls="${secondMenu.icon}">
                                <a href="javascript:void(0)"
                                   data-icon="${secondMenu.icon}"
                                   data-link="${secondMenu.url}?_mid=${secondMenu.id }"
                                   iframe="1">
                                        ${secondMenu.name}
                                </a>
                            </li>
                        </c:if>
                    </c:forEach>
                </ul>
            </li>
        </c:forEach>
    </ul>
</div>
<!-- 左侧菜单栏 -->
<!-- 中间页面内容 -->
<div class="wu-main" data-options="region:'center'">
    <div id="wu-tabs" class="easyui-tabs" data-options="border:false,fit:true">
        <div title="首页" data-options="closable:false,iconCls:'icon-tip',cls:'pd3'">
            <div style="padding:20px;overflow:hidden;">
                <h1 style="margin-bottom:15px;">酒店管理系统</h1>
                <h3>开发团队</h3>
                <p>一群致力于学习 Java 技术的大学生，喜爱互联网这个行业，喜欢专研 Java 各方面的技术。</p>
                <p>【技术栈】EasyUI jQuery Ajax SpringMVC Spring MyBatis MySQL</p>
                <h3>功能模块</h3>
                <ul>
                    <li><p>权限管理</p>
                        <ul>
                            <li>修改密码</li>
                            <li>角色管理</li>
                            <li>用户管理</li>
                        </ul>
                    </li>
                    <li><p>房间管理</p>
                        <ul>
                            <li>楼层管理</li>
                            <li>房型管理</li>
                            <li>房间管理</li>
                        </ul>
                    </li>
                    <li><p>住户管理</p>
                        <ul>
                            <li>住户信息</li>
                            <li>入住管理</li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- 中间页面内容 -->

<script type="text/javascript">
    $(function () {
        // 修改一级菜单间距
        $('.easyui-tree').children('li').attr('style', 'padding: 5px;')

        // 点击二级菜单事件
        $('.easyui-tree a').bind(
            "click",
            function () {
                var title = $(this).text();
                var url = $(this).attr('data-link');
                var iconCls = $(this).attr('data-icon');
                var iframe = $(this).attr('iframe') == 1 ? true : false;
                addTab(title, url, iconCls, iframe);
            }
        );
    });

    /**
     * Name 添加菜单选项
     * Param title 名称
     * Param href 链接
     * Param iconCls 图标样式
     * Param iframe 链接跳转方式（true为iframe，false为href）
     */
    function addTab(title, href, iconCls, iframe) {
        var tabPanel = $('#wu-tabs');

        // 如果面板上不存在这个页面, 则添加
        if (!tabPanel.tabs('exists', title)) {
            var content = '<iframe scrolling="no" frameborder="0"  src="' + href + '" style="width:100%;height:100%;"></iframe>';
            if (iframe) {
                tabPanel.tabs(
                    'add',
                    {
                        title: title,
                        content: content,
                        iconCls: iconCls,
                        fit: true,
                        cls: 'pd3',
                        closable: true
                    }
                );
            } else {
                tabPanel.tabs(
                    'add',
                    {
                        title: title,
                        href: href,
                        iconCls: iconCls,
                        fit: true,
                        cls: 'pd3',
                        closable: true
                    }
                );
            }
        }
        // 否则, 切换面板
        else {
            tabPanel.tabs('select', title);
        }
    }

    /**
     * Name 移除菜单选项
     */
    function removeTab() {
        var tabPanel = $('#wu-tabs');
        var tab = tabPanel.tabs('getSelected');
        if (tab) {
            var index = tabPanel.tabs('getTabIndex', tab);
            tabPanel.tabs('close', index);
        }
    }
</script>
</body>
</html>